<template>
  <div class="el-StereoscopicLibrary">
    <TableTitle>
      <slot>
        <p>查询条件</p>
      </slot>
    </TableTitle>
    <ConditionSearch style="padding: 5px 0">
      <slot>
        <div class="tableSearch">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="巷道：">
              <el-select size="mini" v-model="formInline.rowNo" placeholder="请选择">
                <el-option  v-for="item in roadChoice"  :key="item.value"  :label="item.label"   :value="item.value" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="货位编码">
              <el-input ref="saomaInput"  size="mini"  v-model="formInline.shelvesCode"  placeholder="货位编码" ></el-input>
            </el-form-item>
            <el-form-item label="操作盘编码">
              <el-input ref="saomaInput"  size="mini"  v-model="formInline.palletCode"  placeholder="操作盘编码" ></el-input>
            </el-form-item>
            <el-form-item label="是否空箱">
              <el-select size="mini" v-model="formInline.isEmp" placeholder="是否空箱">
                <el-option label="全部" value=""></el-option>
                <el-option label="是" value="Y"></el-option>
                <el-option label="否" value="N"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否移库位">
              <el-select size="mini" v-model="formInline.transferPosition" placeholder="是否移库位">
                <el-option label="全部" value=""></el-option>
                <el-option label="是" value="Y"></el-option>
                <el-option label="否" value="N"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="货架状态">
              <el-select size="mini" v-model="formInline.status" placeholder="货架状态">
                <el-option label="全部" value=""></el-option>
                <el-option label="占用" value="3"></el-option>
                <el-option label="已分配" value="2"></el-option>
                <el-option label="空闲" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="searchBtn">查询</el-button>
              <el-button type="primary" size="mini" @click="taskOutQuery">查询当前位置出库任务</el-button>
            </el-form-item>
          </el-form>
          <el-drawer title="当前位置出库任务" :visible.sync="drawer.drawer" :with-header="false">
              <el-table :data="drawer.gridData" height=500>
              <el-table-column property="workbinStatus" label="缓存箱状态" width="150"></el-table-column>
              <el-table-column property="palletCode" label="容器编号" width="200"></el-table-column>
              <el-table-column property="roadway" label="巷道"></el-table-column>
              </el-table>
          </el-drawer>
          
        </div>
      </slot>
    </ConditionSearch>
    <TableTitle>
      <slot>
        <p>操作按钮</p>
      </slot>
    </TableTitle>
    <TopBtn></TopBtn>
    <TableTitle>
      <slot>
        <p>立体库信息列表</p>
      </slot>
    </TableTitle>
    <Table></Table>
  </div>
</template>
<script>
import TopBtn from "./components/TopBtn.vue";
import Table from "./components/InfoTable.vue";
import ConditionSearch from "../aacomponents/ConditionSearch.vue";
import TableTitle from "../../../../components/TableTitle.vue";
import { sysLibraryData } from "@/utils/api.js";
import request from "../../../../utils/request";
export default {
  name: "StereoscopicLibrary",
  components: {
    TopBtn,
    Table,
    ConditionSearch,
    TableTitle,
  },
  data() {
    return {
      formInline:{},//查询参数
      roadChoice:[
        {value: "1",label: "巷道1",},
        {value: "2",label: "巷道2",},
        {value: "3", label: "巷道3"},
        {value: "4",label: "巷道4"},
        {value: "5",label: "巷道5"},
        {value: "6",label: "巷道6"},
        {value: "",label: "全部巷道"}
      ],
      drawer:{
        gridData:[],
        drawer: false,
      },
      pageSize: 100,
      pageNumber: 1,
    };
  },
  methods:{
    // 查询
    searchBtn(){
      sysLibraryData({
        searchParams:this.formInline,
        pageParameter:{
          rows:this.pageSize,
          page:this.pageNumber
        }
      }).then((res)=>{
        console.log("res",res);
        if(res.status == 200){
          // 查询成功将数据给Table
          this.$bus.$emit('sysSlSxTable',res)
        }else {
            this.$Alert({
                title: "失败",
                message: res.data.message,
                type: "error",
            });
        }
      })
    },
    taskOutQuery(){
      this.drawer.drawer = true;
      this.drawer.gridData = [];
      request.post("/MsSslShelvesRest/taskOutQuery",{}).then((res)=>{
        console.log("查询结果",res);
        this.drawer.gridData=res.data.result;
      })
    }
  },
  mounted(){
    this.$bus.$on('sysSlPageNumber',(e)=>{
      this.pageNumber = e
      sysLibraryData({
        searchParams:this.formInline,
        pageParameter:{
          rows:this.pageSize,
          page:this.pageNumber
        }
      }).then((res)=>{
        if(res.status == 200){ 
          // 查询成功将数据给Table
          this.$bus.$emit('sysSlSxTable',res)
        }else {
            this.$Alert({ title: "失败", message: res.data.message, type: "error" });
        }
      })
    })
    this.$bus.$on('sysSlPageSize',(e)=>{
      this.pageSize = e
      sysLibraryData({
        searchParams:this.formInline,
        pageParameter:{
          rows:this.pageSize,
          page:this.pageNumber
        }
      }).then((res)=>{
        if(res.status == 200){
          // 查询成功将数据给Table
          this.$bus.$emit('sysSlSxTable',res);
        }else {
            this.$Alert({
                title: "失败",
                message: res.data.message,
                type: "error",
            });
        }
      })
    })
    // 修改刷新Table并定位页数
    this.$bus.$on('sysSlRefreshTable',(e)=>{
      this.$options.methods.searchBtn.bind(this)()
    })
  }
};
</script>
<style scoped>
.tableSearch {
  position: relative;
}
.tableSearch ul{
  overflow: hidden;
}
.tableSearch ul li {
  float: left;
  width: 21%;
  height: 30px;
  line-height: 30px;
  margin-right: 1%;
  margin-bottom: 5px;
  overflow: hidden;
}
.tableSearch ul li span {
  float: right;
}
.tableSearch ul li div {
  float: right;
}
.el-input {
  width: 130px;
}
.el-select {
  width: 130px;
}
.searchBtnBox {
  position: absolute;
  top: 0;
  right: 50px;
}
</style>